<template>
  <el-popover
      popper-class="navbar-notice"
      placement="bottom"
      width="400"
      v-model="visible">
    <i class="icon cuifont icon_alert" slot="reference"></i>
<!--    <el-badge :value="0" class="item" slot="reference">-->
<!--      <i class="icon cuifont icon_alert"></i>-->
<!--    </el-badge>-->
    <notice-content v-loading="loading" :data="list"></notice-content>
  </el-popover>
</template>

<script>
import noticeContent from "@/views/navBarComponent/navbar-notice/notice-content.vue";
export default {
  name: "navbar-notice",
  components: {
    noticeContent
  },
  data () {
    return {
      list: [],
      visible: false,
      loading: true,
      timer: null
    }
  },
  watch: {
    visible (val) {
      this.$store.dispatch('setShowNotice', val)
    },
    '$store.state.app.webSocketMessage' (val) {
      if (val.notifyType === 'bell') {
        if (val.data.status === '200') {
          const elink = document.createElement("a")
          elink.style.display = "none"
          elink.href = val.data.url
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        }
        this.getList()
        this.$notify({
          type: val.data.type,
          title: val.data.title,
          dangerouslyUseHTMLString: true,
          message: val.data.content,
          duration: 0
        });
      }
    },
    '$store.state.app.showNotice' (val) {
      if (val) {
        this.getList()
      }
      this.visible = val
    }
  },
  methods: {
    async getList () {
      this.loading = true
      const { exportPdf } = this.$interface.snapshots
      const { data } = await exportPdf({ userId: this.$store.state.user.id })
      this.list = data.data
      this.$store.dispatch('setDownloadPdfList', data.data)
      this.loading = false
    },
    clearDownloadListFail () {
      this.timer = setInterval(() => {
        this.getList()
      }, 1000 * 60 * 10)
    }
  },
  created () {
    this.getList()
    this.clearDownloadListFail()
  }
}
</script>

<style>
.navbar-notice {
  padding: 0 !important;
}
.el-notification__content {
  text-align: left !important;
}
</style>